<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="vue.min.js"></script>
		<style>
			.box{
            background: #e3e4e5;
            padding: 20px;
            border-radius: 6px 6px 0px 0px;
			width: 400px;
			margin: 0 auto;
        }
        .box .item{
            background: #fff;
            padding: 5px;
            margin: 5px;
            border-radius: 6px;
        }
		.box .item input{
			float: right;
			border: none;
			background: #FFE4C4;
			color: #FF4444;
			font-size: 12px;
			outline: none;
		}
        nav{
            margin: 10px;
            background: #e3e4e5;
            padding: 20px;
			width: 400px;
			margin: 0 auto;
        }
        nav:after{
            display: block;
            content: "";
            clear: both;
        }
        nav div{
            float: left;
            color: #ff4444;
        }
        nav input{
            float: right;
        }
		button{
			border: none;
			background: #ADD8E6;
			font-size: 12px;
			padding: 0px 5px 0px 5px ;
			box-sizing: border-box;
			color: brown;
			outline: none;
		}
        .s{
            padding: 6px;
            background: bisque;
            color: black;
            font-size: 14px;
            width: 60px;
            text-align: center;
            border-radius: 6px;
            cursor: pointer;
        }
    </style>
	</head>
	<body>
		<div id="app">
			<!--    <ul>-->
			<!--        <li v-for="i in list" :key="i.id">{{i.name | setName}}</li>-->
			<!--    </ul>-->
			<!--    {{num1 + num2}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<!--    {{sunm}} &#45;&#45;&#45;&#45;&#45;&#45;{{sun()}}-->
			<div class="box">
				<div v-for="(item,index) in cart" v-bind:key="item.id" class="item">
					<div :style="!item.check?'color:red':''" class="s" @click="select(item)" v-text="item.check?'选中':'未选中'"></div>
					{{item.name}}----价格{{item.price.toFixed(2)}}----<button v-on:click="item.num<=0?0:item.num-=1">-</button>数量{{item.num}}<button v-on:click="item.num+=1">+</button>
					<input type="button" @click="del(index)" value="删除" />
				</div>
			</div>
			<nav>
				<div>
					合计：¥ {{totalP.toFixed(2)}}
				</div>
				<button @click="checkAll">全选</button>
				<button @click="checkNone">全不选</button>
				<input @click="add()" type="button" value="提交订单" v-bind:disabled="!totalP>0">
			</nav>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					// list:[{
					//     id:'1',
					//     name:'国庆&18'
					// }]
					num1: 1,
					num2: 2,
					cart: [{
						id: '001',
						name: '袜子',
						price: 10,
						desc: '10元3双',
						num: 1,
						check: false
					}, {
						id: '002',
						name: '杯子',
						price: 9.9,
						desc: '玻璃杯',
						num: 5,
						check: false
					}, {
						id: '003',
						name: '电脑',
						price: 10000,
						desc: '电脑',
						num: 1,
						check: false
					}]
				},
				computed: {
					sunm() {
						console.log('计算属性')
						return this.num1 + this.num2
					},
					totalP() { //计算价格
						var sunm = 0
						this.cart.forEach(function(item, index) {
							if (item.check) {
								console.log(item)
								sunm += item.price * item.num
							}
						})
						return sunm
					}
					//1。计算属性
					//缓存机制
				},
				methods: {
					del:function(num){
						return this.cart.splice(num,1);
					},
					checkNone:function() {
						this.cart.forEach(function(item,index) {
						  item.check = false;
					});
					},
					checkAll: function() {
						this.cart.forEach(function(item, index) {
							item.check = true;
						});
					},

					sun() {
						console.log('methods')
						return this.num1 + this.num2;
					},
					add() { //点击提交订单
						var w = confirm('确认提交订单？')
						if (w) {
							window.location = 'https://www.baidu.com'
						} else {
							alert('取消提交订单')
						}
					},
					select(e) {
						console.log(e)
						this.cart.forEach((item, index) => {
							if (item.id === e.id) {
								this.cart[index].check = !this.cart[index].check
							}
						})
					}
				} // filters: {
				//     setName(value){
				//         console.log(value)
				//         console.log(value.split('&'))
				//         return value.split('&')[0]
				//     }
				//     // 价格  格式化时间
				// },
			})
		</script>
	</body>
</html>
